<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#add").click(function(){
                // 获取文本框内容
                let inText = $("#inText").val();
                let l = "<li>"+inText+"</li>";
                // $("ul").html($("ul").html()+l);

                // 内部插入
                // a.append(b)
                // $("ul").append(l);
                // b.appendTo(a)
                // $(l).appendTo($("ul"));

                // 外部插入
                // 将新增内容插入到第一行之前
                // $("li:first").before(l);
                // $(l).insertBefore($("li:first"));

                // 将新增内容插入到末尾
               // $("li:last").after(l);
                $(l).insertAfter($("li:last"));
            });

            $("li").click(function(){
                // let l = "<li>"+$(this).html()+"</li>";
                // 克隆指定的元素
                // 如果指定元素存在事件,此处克隆不会克隆
                // let l = $(this).clone();
                // 但是某些场景中,我们克隆元素的同时需要克隆它对应的事件
                // 克隆方法可以传递参数,其参数是一个布尔类型
                // true:克隆元素的同时克隆其对应的事件
                // false:默认值,不可隆事件
                let l = $(this).clone(true);
                $("ul").append(l);
            });
            $("#remove").click(function(){
                // 删除指定元素
                $("ul").remove();
            });
            $("#clear").click(function(){
                // 清空指定元素的标签体内容
                $("ul").empty();
            });
        })
    </script>
</head>
<body>
<input type="text" id="inText">
<button id="add">追加</button>
<button id="remove">删除</button>
<button id="clear">清空</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>